<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米有品</title>
</head>

<body>
    <header>
        <p>
            <span class="iconfont icon-sousuo"></span>
            <input type="text" placeholder="新年快乐">
        </p>
    </header>
    <main>
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../../public/imgs/banner-pic1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../../public/imgs/banner-pic2.jpeg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../../public/imgs/banner-pic3.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../../public/imgs/banner-pic4.jpeg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../../public/imgs/banner-pic5.jpeg" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <ul class="commodity">
            <li>
                <a href="new.html">
                      <img src="../../public/imgs/1.png" alt="">
                <p>上新精选</p>
                </a>
              
            </li>
            <li>
                <a href="quality.html">
                     <img src="../../public/imgs/2.png" alt="">
                <p>小米众筹</p>
                </a>
               
            </li>
            <li>
                <img src="../../public/imgs/3.png" alt="">
                <p>有品会员</p>
            </li>
            <li>
                <img src="../../public/imgs/4.png" alt="">
                <p>有品秒杀</p>
            </li>
            <li>
                <img src="../../public/imgs/5.png" alt="">
                <p>小米自营</p>
            </li>
            <li>
                <img src="../../public/imgs/4.png" alt="">
                <p>有品秒杀</p>
            </li>
            <li>
                <img src="../../public/imgs/5.png" alt="">
                <p>小米自营</p>
            </li>
            <li>
                <img src="../../public/imgs/2.png" alt="">
                <p>小米众筹</p>
            </li>
            <li>
                <img src="../../public/imgs/3.png" alt="">
                <p>有品会员</p>
            </li>
            <li>
                <img src="../../public/imgs/1.png" alt="">
                <p>上新精选</p>
            </li>
        </ul>
        <!-- 迎新年焕新家 -->
        <div class="home">
            <div class="home-top">
                <div class="newyear_left">
                    <h2>迎新年焕新家</h2>
                    <span>愿你，平安快乐，梦想有望</span>
                </div>
                <div class="newyear_right">
                    <img class="boutique1" src="../../public/imgs/Boutique1.png" alt="">
                    <img class="boutique4" src="../../public/imgs/Boutique4.png" alt="">
                    <img class="boutique3" src="../../public/imgs/Boutique3.png" alt="">
                </div>
            </div>
            <ul class="home-bottom">
                <li>
                    <h5>小米科技年货</h5>
                    <span>至高24期免息</span>
                    <img src="../../public/imgs/mi.png" alt="">
                </li>
                <li>
                    <h5>智能生活好物</h5>
                    <span>至高省1100元></span>
                    <img src="../../public/imgs/camera.png" alt="">
                </li>
                <li>
                    <h5>暖冬服饰</h5>
                    <span>羽绒服186起></span>
                    <img src="../../public/imgs/cloth.png" alt="">
                </li>
                <li>
                    <h5>智能家电</h5>
                    <span>爆款秒杀></span>
                    <img src="../../public/imgs/frage.png" alt="">
                </li>
            </ul>
        </div>
        <!-- 手机系列内容 -->
        <ul class="phone">
            <li>
                <div class="left">
                    <h5>Redmi K60 系列</h5>
                    <span>集卡赢手机</span>
                </div>
                <p class="img"><img src="../../public/imgs/Boutique8.png" alt=""></p>
            </li>
            <li>
                <div class="left">
                    <h5>Xiaomi 13 系列</h5>
                    <span>集卡赢手机</span>
                </div>
                <p class="img"><img src="../../public/imgs/mi.png" alt=""></p>
            </li>
        </ul>
        <!--  -->
        <div class="box">
            <a href="#">精选好物</a>
            <a href="#">年货节</a>
            <a href="#">防疫必备</a>
            <a href="#">会员推荐</a>
            <a href="#">日常元素</a>
            <a href="#">有品定制</a>
            <a href="#">热销排行</a>
        </div>
        <!-- 商品的详细信息 -->
        <ul class="deteils">
            <li>
                <img src="../../public/imgs/smell.png" alt="">
                <h5><span class="text">年货节</span>空气清新香氛</h5>
                <span class="price">￥28.9</span>
            </li>
            <li>
                <img src="../../public/imgs/Boutique2.png" alt="">
                <h5><span class="text">年货节</span>空气清新香氛</h5>
                <span class="price">￥128.9</span>
            </li>
            <li>
                <img src="../../public/imgs/box.jpg" alt="">
                <h5><span class="text">年货节</span>空气清新香氛</h5>
                <span class="price">￥38.9</span>
            </li>
            <li>
                <img src="../../public/imgs/cheng.png" alt="">
                <h5><span class="text">年货节</span>空气清新香氛</h5>
                <span class="price">￥88.9</span>
            </li>
            <li>
                <img src="../../public/imgs/zc-cnxh4.png" alt="">
                <h5><span class="text">年货节</span>空气清新香氛</h5>
                <span class="price">￥118.9</span>
            </li>
            <li>
                <img src="../../public/imgs/jiu.png" alt="">
                <h5><span class="text">年货节</span>空气清新香氛</h5>
                <span class="price">￥288.9</span>
            </li>
            <li>
                <img src="../../public/imgs/sxjp-1.png" alt="">
                <h5><span class="text">年货节</span>空气清新香氛</h5>
                <span class="price">￥6888.9</span>
            </li>
            <li>
                <img src="../../public/imgs/sxjp-7.png" alt="">
                <h5><span class="text">年货节</span>空气清新香氛</h5>
                <span class="price">￥208.9</span>
            </li>
        </ul>
    </main>
    <footer>
        <p>
            <i class="iconfont icon-shouye1"></i>
            <span>首页</span>
        </p>
        <p>
            <i class="iconfont icon-icon"></i>
            <span>分类</span>
        </p>
        <p class="pp">
            美好生活新发现
        </p>
        <p>
            <i class="iconfont icon-shouye"></i>
            <span>购物车</span>
        </p>
        <p>
            <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </p>
    </footer>

</body>

</html>